<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ipKey" placeholder="please enter key">
    <input type="text" id="ipValue" placeholder="please enter value">
    <button id="btnUpdate">更新</button>
    <hr>
    <h3>JSON信息</h3>
    <p id="pJson">这里是JSON信息</p>

    <script>
        // 准备一个空对象 用于盛放最新的key-value
        var obj = {}

        btnUpdate.onclick = function(){
            // 采集到用户输入的key和value
            var key = ipKey.value
            var value = ipValue.value

            // 动态地为obj添加属性与值
            // obj.home = "广东"
            obj[key] = value

            // 将对象的信息描述为JSON字符串
            var jsonStr = JSON.stringify(obj)

            // 在P标签上显示obj的信息
            pJson.innerText = jsonStr
        }
    </script>
</body>
</html>